<template>
  <div style="padding-top: 16px">

    <div class="courseView" @click="chooseItem(el)" v-for="(el,idx) in dataList">
      <img class="imgView" :src="el.picUrl"/>
      <span class="item-tag">VIP·专享</span>
      <div class="rightView">
        <div class="titleTopView">
          <div v-if="el.courseType==1">
            <img v-if="el.id == playingMedia.id" src="../../../../../../static/img/course_details_video.png"/>
            <img v-else-if="el.playCnt <= 0"
                 src="../../../../../../static/img/course_details_video_black.png"/>
            <img v-else src="../../../../../../static/img/course_details_video_gray.png"/>
          </div>
          <div v-else>
            <img v-if="el.id == playingMedia.id" src="../../../../../../static/img/course_details_audio.png"/>
            <img v-else-if="el.playCnt<=0" src="../../../../../../static/img/course_details_audio_black.png"/>
            <img v-else src="../../../../../../static/img/course_details_audio_gray.png"/>
          </div>
          <p class="video_pic_title"> {{el.courseType==1 ?'视频':'音频'}}</p>

          <div class="free_watch" v-if="false && el.type==1">免费试看</div>
        </div>

        <p
          :class="(el.id == playingMedia.id) ? 'hoverA nameLabel ellipsis2'  : (el.playCnt<=0) ? 'unread nameLabel ellipsis2' : 'readed nameLabel ellipsis2'  ">
          {{el.title}}</p>

      </div>

    </div>
  </div>

</template>

<script>

  export default {
    name: 'chapterList',
    props: {
      dataList: {
        default () {
          return []
        }
      },
      playingMedia: {
        default () {
          return {}
        }
      }
    },
    methods: {
      chooseItem (el) {
        this.$emit('videoData', el)
      }
    }
  }
</script>

<style scoped>
  .courseView {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: row;
    position: relative;
  }

  .imgView {
    width: 100px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
  }

  .item-tag {
    position: absolute;
    top: 0;
    left: 16px;
    color: #76380a;
    font-size: 9px;
    background: #ffdc99;
    border-radius: 4px 0 4px 0;
    font-weight: bold;
    padding: 2.5px 4.5px;
  }

  .rightView {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .titleTopView {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .titleTopView img {
    width: 14px;
    height: 14px;
  }

  .video_pic_title {
    font-weight: bold;
    font-size: 14px;
    color: #4C4D50;
    margin-left: 4px;
    line-height: 14px;
  }

  .free_watch {
    margin-left: 4px;
    font-weight: bold;
    font-size: 11px;
    color: #009944;
    background: #C3E7D1;
    padding: 0 6px;
    border-radius: 2px;
  }

  .hoverA {
    color: #005BAB !important;
  }

  .readed {
    color: #999999;
  }

  .unread {
    color: #4C4D50;
  }

  .nameLabel {
    margin-top: 3px;
    font-size: 14px;
    line-height: 18px;
  }

</style>

